<template>
  <PageWrapDrawer :show="show" :isUpdate="isUpdate" width="50%"
  @success="onSubmit" 
  @on-drawer-close="onClose">
    <Form name="basic"
          :model="insideData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
          layout="horizontal"
    >
      <FormItem label="按钮组" name="name" v-bind="validateInfos['data.group']">
        <a-input v-model:value="insideData.data.group"/>
      </FormItem>
      <FormItem label="按钮名称" name="name" v-bind="validateInfos['data.name']">
        <a-input v-model:value="insideData.data.name"/>
      </FormItem>

      <FormItem label="图标" name="icon">
        <a-input v-model:value="insideData.data.icon"/>
      </FormItem>
      <FormItem label="顺序" name="sort">
        <InputNumber v-model:value="insideData.data.sort" :min="0" :max="9999"/>
      </FormItem>
      <FormItem label="位置" name="place">
        <Select v-model:value="insideData.data.place">
          <SelectOption :value="0">表格上方-左边</SelectOption>
          <SelectOption :value="1">表格上方-右边</SelectOption>
          <SelectOption :value="2">表格内-操作</SelectOption>
          <SelectOption :value="3">其他</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="方法" name="func" v-bind="validateInfos['data.func']">
        <Select v-model:value="insideData.data.func">
          <SelectOption value="create">create</SelectOption>
          <SelectOption value="edit">edit</SelectOption>
          <SelectOption value="delete">delete</SelectOption>
          <SelectOption value="copy">copy</SelectOption>
          <SelectOption value="batchDelete">batchDelete</SelectOption>
          <SelectOption value="-">无</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="父ID" name="parentId">
        <InputNumber v-model:value="insideData.data.parentId" :min="0" :max="999"/>
      </FormItem>
      <FormItem label="启用" name="enable">
        <RadioGroup v-model:value="insideData.data.enable">
          <Radio :value="1">启用</Radio>
          <Radio :value="0">禁用</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="是否提示" name="tip">
        <RadioGroup v-model:value="insideData.data.tip">
          <Radio :value="1">提示</Radio>
          <Radio :value="0">不提示</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="提示内容" name="tipContent">
        <a-textarea v-model:value="insideData.data.tipContent" placeholder="提示内容..."/>
      </FormItem>
      <FormItem label="备注" name="memo">
        <a-textarea v-model:value="insideData.data.memo" placeholder="说点什么..."/>
      </FormItem>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="menuDrawer" setup>
import {reactive, toRaw, watchPostEffect} from 'vue';
import {useMessage} from '/@/hooks/web/useMessage';
import {PageWrapDrawer} from '/@/components/PageWrapDrawer'
import {create, update} from '/@/api/admin/button';
import {
  Form,
  FormItem,
  InputNumber,
  Radio, RadioGroup,
  Select, SelectOption,
} from 'ant-design-vue';

const {
      createMessage,
    } = useMessage();
    const {info, success, warning, error} = createMessage;

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const insideData = reactive({
  data: {
    id: null,
    group: '',
    name: '',
    icon: '',
    parentId: 0,
    place: 0,
    func: '',
    sort: 0,
    enable: 1,
    tip: 0,
    tipContent: '',
    memo: '',
  }
});

watchPostEffect(() => {
  let v1 = props.row as any
  if (v1) {
    insideData.data = {...v1}
  }
})

const rulesRef = reactive({
  'data.name': [
    {required: true, message: '请输入按钮名称',},
  ],
  'data.place': [
    {required: true, message: '请选择按钮位置',},
  ],
  'data.func': [
    {required: true, message: '请选择方法',},
  ],
});
const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
    // console.log('args=>', ...args)
  },
});

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    }).catch(err => {
    console.log('error-----', err);
  });
}

const onClose = () => {
  Object.assign(insideData, {data: {name: ''}});
  resetFields();
  emit('on-drawer-close');
};

</script>
